<template>
    <el-breadcrumb class="vea-breadcrumb">
        <el-breadcrumb-item :to="{name:'home'}">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{name:'notice'}">公告管理</el-breadcrumb-item>
        <el-breadcrumb-item>
            {{ route.name === 'notice_add' ? '新增' : '编辑' }}公告
        </el-breadcrumb-item>
    </el-breadcrumb>
    <el-form class="vea-form" ref="notice" label-width="120px" :model="noticeFrom" :rules="rules">
        <el-form-item label="公告标题" prop="name">
            <el-input v-model="noticeFrom.name"/>
        </el-form-item>
        <el-form-item label="作者">
            <el-input v-model="noticeFrom.author"/>
        </el-form-item>
        <el-form-item label="公告时间" prop="times">
            <div style="width: 220px">
                <el-date-picker
                        v-model="noticeFrom.times"
                        type="daterange"
                        range-separator="到"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :editable="false"
                        value-format="YYYY-MM-DD"
                />
            </div>
        </el-form-item>
        <el-form-item label="公告内容">
            <vea-editor-components :its="noticeFrom.content" width="500px" @editor="updateContent"/>
        </el-form-item>
        <el-form-item label="排序">
            <el-input-number min="1" v-model="noticeFrom.sort"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="save" @click="submit(notice)">保存</el-button>
        </el-form-item>
    </el-form>
</template>

<script setup>
import {useRoute} from "vue-router";
import VeaEditorComponents from "@/components/veaEditorComponents/veaEditorComponents.vue";
import {onMounted, ref} from "vue";
import {$ajax, apiUrl} from "@/utils/request";
import router from "@/router";

const route = useRoute()
const notice = ref()
const save = ref(false)
const noticeFrom = ref({
    id: null,
    name: null,
    author: "搬砖的小白",
    content: null,
    state: 1,
    start_time: null,
    end_time: null,
    sort: 1,
    times: []
})
const rules = ref({
    name: [
        {required: true, message: '请输入公告标题'}
    ],
    times: [
        {required: true, message: '请选择公告时间'}
    ]
})
const submit = (refs) => {
    refs.validate(err => {
        save.value = err
        if (err) {
            $ajax.post(`${apiUrl}/notice/save`, noticeFrom.value).then(() => {
                save.value = false
                router.replace({name: "notice"})
            }).catch(() => save.value = false)
        }
    })
}
const updateContent = (value) => {
    noticeFrom.value.content = value
}
// let route = useRoute()
onMounted(() => {
    if (route.params.id) {
        //获取公告信息
        $ajax.get(`${apiUrl}/notice/one`, {params: {id: route.params.id}}).then(({data: {result}}) => {
            noticeFrom.value = result;
        })
    }
})
</script>

<style scoped>

</style>
